<template>
    <van-stepper :class="`z-stepper-${theme}`" :theme="theme"  :disable-input="disabletype === 1" />
</template>
<script setup>

const props = defineProps({
    theme: {
        type: String,
        default: 'round',
    },
    disabletype: {
        type: Number,
        default: 1,
    }
});

const theme = props.theme

</script>
<style scoped lang="scss">
.z-stepper-round {
    display: flex;
    align-items: center;

    :deep(.van-stepper__input) {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 16px;
    }

    :deep(.van-stepper__minus),
    :deep(.van-stepper__plus) {
        background: #5C5C66;
        border: 0;
        color: #FFFFFF;
        width: 20px;
        height: 20px;

        &:before,
        &:after {
            background-color: #FFFFFF;
        }
    }
    :deep(.van-stepper__minus--disabled) {
        opacity: .4;
    }
}
.z-stepper-square {
    display: flex;
    align-items: center;
    background: #393940;
    border: 1px solid #999999;
    border-radius: 4px;

    :deep(.van-stepper__input) {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 20px;
        height: 24px;
        background: transparent;
        margin: 0;
        border-left: 1px solid #999999;
        border-right: 1px solid #999999;
    }

    :deep(.van-stepper__minus),
    :deep(.van-stepper__plus) {
        background: transparent;
        border: 0;
        color: #FFFFFF;
        width: 24px;
        height: 24px;

        &:before,
        &:after {
            background-color: #FFFFFF;
        }
    }
    :deep(.van-stepper__minus--disabled) {
        opacity: .4;
    }
}
// .z-stepper {
//     display: flex;
//     justify-content: space-between;
//     align-items: center;

//     &-subtract,
//     &-add {
//         cursor: pointer;
//         background: #5C5C66;
//         border-radius: 50%;
//         width: 20px;
//         height: 20px;
//         font-size: 0;
//         display: flex;
//         justify-content: center;
//         align-items: center;

//         .icon {
//             font-weight: bold;
//         }
//     }

//     &-number {
//         font-size: 16px;
//         font-family: PingFang SC;
//         font-weight: bold;
//         color: #FFFFFF;
//         line-height: 16px;
//         padding: 0 11px;
//     }
// }
</style>